<!DOCTYPE html>
<html>

<head>
    <title>Ba Wang Hua</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery.min.js"></script>
    <!-- Custom Theme files -->
    <!--theme-style-->
    <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
    <!--//theme-style-->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script type="application/x-javascript">
        addEventListener("load", function() {
            setTimeout(hideURLbar, 0);
        }, false);

        function hideURLbar() {
            window.scrollTo(0, 1);
        }
    </script>
    <!--fonts-->
    <link href='http://fonts.useso.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
    <!--//fonts-->
    <script type="text/javascript" src="js/move-top.js"></script>
    <script type="text/javascript" src="js/easing.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $(".scroll").click(function(event) {
                event.preventDefault();
                $('html,body').animate({
                    scrollTop: $(this.hash).offset().top
                }, 1000);
            });
        });
    </script>
    <!----start-top-nav-script---->
</head>

<body>
    <!--header-->
    <div class="header">
        <div class="container">
            <div class="logo">
                <a href="index.html"><img src="images/logo.png" alt=""></a>
            </div>
            <div class="top-nav">
                <span class="menu"> </span>
                <ul>
                    <li class="active"><a href="#home" class="scroll">主页</a></li>
                    <li><a href="#about" class="scroll">关于</a></li>
                    <li><a href="#services" class="scroll">美食</a></li>
                    <li><a href="#work" class="scroll">作品</a></li>
                    <li><a href="#team" class="scroll">团队 </a></li>
                    <li><a href="#pricing" class="scroll">我们的家乡</a></li>
                    <li><a href="#contact" class="scroll">联系我们</a></li>
                </ul>
                <script>
                    $("span.menu").click(function() {
                        $(".top-nav ul").slideToggle(500, function() {});
                    });
                </script>
            </div>
            <div class="clearfix"> </div>
        </div>
    </div>
    <!---->
    <div class="banner">
        <div class="container">
            <div class="banner-matter">
                <h2>welcome to <span>BA WANG HUANG'S garden</span></h2>
                <a href="#" class="btn  btn-8d">Let's start</a>
            </div>
        </div>
    </div>
    <!--content-->
    <div class="content">
        <div class="about" id="about">
            <div class="about-left">
                <h3>关于我们</h3>
                <p>我们来自五湖四海，相聚成都东软学院</p>
                <p>一号小蔷薇：文静 来自四川凉山</p>
                <p>二号红玫瑰：马素红 来自四川泸州</p>
                <p>三号芍药花：吴诗蕊 来自成都邛崃</p>
                <p>四号小荷花：张慧玲 来自四川达州</p>
            </div>
            <div class="about-right">
                <img class="img-responsive" src="images/pi.jpg" alt="" />
            </div>
            <div class="clearfix"> </div>
            <!---->
            <div class="about-now">
                <div class="container">
                    <div class="every">



                    </div>
                </div>
                <div class="clearfix"> </div>
            </div>
        </div>
    </div>
    <!---->
    <script type="text/javascript" src="js/circles.js"></script>
    <script>
        var colors = [
            ['', '#19c9cb'],
            ['', '#fa5b3c'],
            ['', '#ffbf12'],
            ['', '#f06eaa']
        ];
        for (var i = 1; i <= 5; i++) {
            var child = document.getElementById('circles-' + i),
                percentage = 50 + (i * 10);

            Circles.create({
                id: child.id,
                percentage: percentage,
                radius: 115,
                width: 10,
                number: percentage / 10,
                text: '%',
                colors: colors[i - 1]
            });
        }
    </script>
    <!--//-->
    </div>
    </div>
    </div>
    <!---->
    <div class="team" id="team">
        <div class="container">
            <div class="team-in">
                <h3>团队</h3>
                <p>这就是我们</p>
            </div>
            <div class="team-grids ">
                <div class="col-md-3 team-grid">
                    <a href=" http://wenjinggg.gitee.io/my-website/"><img class="img-responsive team-left" src="images/a1.jpg" alt="" /></a>
                    <div class="col-in">
                        <b>文静</b>
                        <span>Designer</span>
                        <ul class="social">
                            <li><a href="#"><span> </span> </a></li>
                            <li class="inline"><a href="#"><span> </span> </a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-3 team-grid">
                    <a href="http://ma-suhong.gitee.io/personal-website-5"><img class="img-responsive team-left" src="images/a2.jpg" alt="" /></a>
                    <div class="col-in">
                        <b>马素红</b>
                        <span>Designer</span>
                        <ul class="social">
                            <li><a href="#"><span> </span> </a></li>
                            <li class="inline"><a href="#"><span> </span> </a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-3 team-grid">
                    <a href="http://wu-shirui.gitee.io/final-assignment/#"> <img class="img-responsive team-left" src="images/a3.jpg" alt="" /></a>
                    <div class="col-in">
                        <b>吴诗蕊</b>
                        <span>Designer</span>
                        <ul class="social">
                            <li><a href="#"><span> </span> </a></li>
                            <li class="inline"><a href="#"><span> </span> </a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-3 team-grid">
                    <a href="http://zhang-huiling.gitee.io/personal/"><img class="img-responsive team-left" src="images/a4.jpg" alt="" /></a>
                    <div class="col-in">
                        <b>张慧玲</b>
                        <span>Designer</span>
                        <ul class="social">
                            <li><a href="#"><span> </span> </a></li>
                            <li class="inline"><a href="#"><span> </span> </a></li>
                        </ul>
                    </div>
                </div>
                <div class="clearfix"> </div>
            </div>
        </div>
    </div>
    <!---->
    <div class="fact" id="services">
        <div class="container">
            <div class="some-in">
                <h3>美食</h3>
                <p>看一看我们都吃啥？</p>
            </div>
            <div class="fact-grids ">
                <div class="col-md-3 fact-grid">
                    <a href="#"><span> </span></a>
                    <b>火盆烧烤</b>
                    <p>凉山特色</p>
                </div>

                <div class="col-md-3 fact-grid">
                    <a href="#"><span class="arrow"> </span></a>
                    <b>猪儿粑</b>
                    <p>四川泸州</p>
                </div>

                <div class="col-md-3 fact-grid">
                    <a href="#"><span class="clock"> </span></a>
                    <b>奶汤面</b>
                    <p>成都邛崃</p>
                </div>

                <div class="col-md-3 fact-grid">
                    <a href="#"><span class="smile"> </span></a>
                    <b>黄花之乡</b>
                    <p>达州渠县</p>
                </div>

                <div class="clearfix"> </div>
            </div>
        </div>
    </div>
    <!---->
    <div class="services">
        <div class="container">
            <div class="services-in">
                <h3>更多</h3>
                <p>有没有心动丫 来看下一波~ ~ ~</p>
            </div>
            <div class="service-grids ">
                <div class="col-md-4 service-grid">
                    <img class="img-responsive team-left" src="images/gen2.jpg" alt="" />

                    <h5>麻辣鸡</h5>
                    <P>麻辣鸡是四川省传统的特色名菜，属于川菜系。味道鲜辣入口鲜麻，口感脆香，味感超棒噢</P>
                </div>
                <div class="col-md-4 service-grid">
                    <img class="img-responsive team-left" src="images/gen 1.jpg" alt="" />

                    <h5>鲜溜鸡丁</h5>
                    <P>鲜溜鸡丁是一道传统特色菜肴，属于川菜。白、绿、红三色相间，咸鲜嫩滑，微辣爽口。（小贴士：高血脂症、高血压病、冠心病、糖尿病、肥胖症及低蛋白血症患者宜适量食用）</P>
                </div>
                <div class="col-md-4 service-grid">
                    <img class="img-responsive team-left" src="images/gen3.jpg" alt="" />

                    <h5>猪儿粑</h5>
                    <P>猪儿粑是中国南方的一道美味可口又充满趣味的传统小吃，主要在贵州遵义、四川泸州、宜宾、自贡、内江，云南昭通的盐津、水富一带比较流行，正宗的猪儿粑要用上正宗的良姜叶,蒸好以后才有叶子的清香。</P>
                </div>
                <div class="clearfix"> </div>
            </div>
            <div class="service-grids ">
                <div class="col-md-4 service-grid">
                    <img class="img-responsive team-left" src="images/gen 4.jpg" alt="" />
                    <h5>串串香</h5>
                    <P>用砂锅精心熬制的健康养生串串香，原味有股淡淡的清香，并且不是那样燥辣，口味有很多种，料碟也比较丰富</P>
                </div>
                <div class="col-md-4 service-grid">
                    <img class="img-responsive team-left" src="images/gen 5.jpg" alt="" />
                    <h5>黄粑</h5>
                    <P>泸州黄粑色泽金黄、香气浓郁、味甜糍和。其独到之处在于包料选择的是良姜叶，黄粑的香味正是来自良姜叶内所含的芳香油</P>
                </div>
                <div class="col-md-4 service-grid">
                    <img class="img-responsive team-left" src="images/gen 6.jpg" alt="" />
                    <h5>葱香鲫鱼脯</h5>
                    <P>葱香鲫鱼脯是一道特色名菜，葱香浓郁，口味鲜美。切块浸汁的葱烤鲫鱼，在口味与质感上均比整条烤制更佳。</P>
                </div>
                <div class="clearfix"> </div>
            </div>
        </div>
    </div>

    <!---->
    <div class="work" id="work">
        <div class="container">
            <div class="work-in">
                <h3>作品集</h3>
                <p>来看看我们的作品吧</p>
            </div>
        </div>
        <ul id="filters">
            <li class="active"><span class="filter" data-filter="app card icon logo set web">ALL</span><label>/</label></li>
            <li><span class="filter" data-filter="app">CORPORATE WEB SITE</span><label>/</label></li>
            <li><span class="filter" data-filter="card">RESPONSIVE DESIGN </span><label>/</label></li>
            <li><span class="filter" data-filter="icon">MOBILE aPPS</span><label>/</label></li>
            <li><span class="filter" data-filter="logo">wORDPRESS THEME </span></li>

        </ul>
        <div id="portfoliolist">
            <div class="portfolio app mix_all" data-cat="app" style="display: inline-block; opacity: 1;">
                <div class="portfolio-wrapper ">
                    <a href="#" class="b-link-stripe b-animate-go  thickbox play-icon">
                        <img class="img-responsive " src="images/w1.jpg" alt="" />
                    </a>
                    <div class="simple">
                        <h5>project name</h5>
                        <p>版式设计</p>
                    </div>
                </div>
            </div>
            <div class="portfolio icon mix_all" data-cat="icon" style="display: inline-block; opacity: 1;">
                <div class="portfolio-wrapper">
                    <a href="#" class="b-link-stripe b-animate-go  thickbox play-icon ">
                        <img class="img-responsive" src="images/w2.jpg" alt="" /></a>
                    <div class="simple">
                        <h5>project name</h5>
                        <p>版式设计</p>
                    </div>
                </div>
            </div>
            <div class="portfolio card mix_all" data-cat="card" style="display: inline-block; opacity: 1;">
                <div class="portfolio-wrapper">
                    <a href="#" class="b-link-stripe b-animate-go  thickbox play-icon ">
                        <img class="img-responsive" src="images/w3.jpg" alt="" /></a>
                    <div class="simple">
                        <h5>project name</h5>
                        <p>版式设计</p>
                    </div>
                </div>
            </div>
            <div class="portfolio app mix_all" data-cat="app" style="display: inline-block; opacity: 1;">
                <div class="portfolio-wrapper ">
                    <a href="#" class="b-link-stripe b-animate-go  thickbox play-icon ">
                        <img class="img-responsive" src="images/w4.jpg" alt="" /></a>
                    <div class="simple">
                        <h5>project name</h5>
                        <p>版式设计</p>
                    </div>
                </div>
            </div>
            <div class="portfolio card mix_all" data-cat="card" style="display: inline-block; opacity: 1;">
                <div class="portfolio-wrapper ">
                    <a href="#" class="b-link-stripe b-animate-go  thickbox play-icon ">
                        <div class="simple">
                            <h5>project name</h5>
                            <p>版式设计</p>
                        </div>
                </div>
            </div>
            <div class="portfolio icon mix_all" data-cat="icon" style="display: inline-block; opacity: 1;">
                <div class="portfolio-wrapper">
                    <a href="#small-dialog5" class="b-link-stripe b-animate-go  thickbox play-icon ">

                    </a>
                    <div class="simple">
                        <h5>project name</h5>
                        <p>版式设计</p>
                    </div>
                </div>
            </div>
            <div class="portfolio chair set mix_all" data-cat="set" style="display: inline-block; opacity: 1;">
                <div class="portfolio-wrapper">
                    <a href="#small-dialog5" class="b-link-stripe b-animate-go  thickbox play-icon ">

                    </a>
                    <div class="simple">
                        <h5>project name</h5>
                        <p>版式设计</p>
                    </div>
                </div>
            </div>
            <div class="portfolio chair logo mix_all" data-cat="logo" style="display: inline-block; opacity: 1;">
                <div class="portfolio-wrapper">
                    <a href="#small-dialog5" class="b-link-stripe b-animate-go  thickbox play-icon ">

                    </a>
                    <div class="simple">
                        <h5>project name</h5>
                        <p>版式设计</p>
                    </div>
                </div>
            </div>
            <div class="clearfix"> </div>
        </div>
        <!-- Script for gallery Here -->
        <script type="text/javascript" src="js/jquery.mixitup.min.js"></script>
        <script type="text/javascript">
            $(function() {

                var filterList = {

                    init: function() {

                        // MixItUp plugin
                        // http://mixitup.io
                        $('#portfoliolist').mixitup({
                            targetSelector: '.portfolio',
                            filterSelector: '.filter',
                            effects: ['fade'],
                            easing: 'snap',
                            // call the hover effect
                            onMixEnd: filterList.hoverEffect()
                        });

                    },

                    hoverEffect: function() {

                        // Simple parallax effect
                        $('#portfoliolist .portfolio').hover(
                            function() {
                                $(this).find('.label').stop().animate({
                                    bottom: 0
                                }, 200, 'easeOutQuad');
                                $(this).find('img').stop().animate({
                                    top: -30
                                }, 500, 'easeOutQuad');
                            },
                            function() {
                                $(this).find('.label').stop().animate({
                                    bottom: -40
                                }, 200, 'easeInQuad');
                                $(this).find('img').stop().animate({
                                    top: 0
                                }, 300, 'easeOutQuad');
                            }
                        );

                    }

                };

                // Run the show!
                filterList.init();


            });
        </script>
    </div>
    <!---->
    <div class="price" id="pricing">
        <div class="container">
            <div class="price-in">
                <h3>我们的家乡</h3>
                <p>各具特色，风味十足</p>
            </div>
            <div class="price-grids ">
                <div class="col-md-3 price-grid">
                    <ul>
                        <li>
                            <h6>荷花镇</h6>
                        </li>
                        <li><span><b>凉山</b><small>Liang San</small></span></li>
                        <li>
                            <p>螺髻山</p>
                        </li>
                        <li>
                            <p>邛海</p>
                        </li>
                        <li>
                            <a href="https://baike.so.com/doc/5714404-5927130.html" class="sign-up">会理古城</a>
                        </li>
                        <li>
                            <p>泸沽湖</p>
                        </li>
                        <li><a href="#" class="sign-up">四川</a></li>
                    </ul>
                </div>
                <div class="col-md-3 price-grid">
                    <ul>
                        <li>
                            <h6>赤水镇</h6>
                        </li>
                        <li><span><b>泸州</b><small>Lu Zhou</small></span></li>
                        <li>
                            <p>泸州老窖旅游区</p>
                        </li>
                        <li>
                            <a href="https://baike.so.com/doc/25773603-26908982.html" class="sign-up">清溪谷旅游区</a>
                        </li>
                        <li>
                            <p>黄荆原始森林</p>
                        </li>
                        <li>
                            <p>欢乐海底世界</p>
                        </li>
                        <li><a href="#" class="sign-up">四川</a></li>
                    </ul>
                </div>
                <div class="col-md-3 price-grid">
                    <ul>
                        <li>
                            <h6>临邛镇</h6>
                        </li>
                        <li><span><b>邛崃</b><small>Qiong lai</small></span></li>
                        <li>
                            <a href="https://baike.so.com/doc/5335482-5570920.html" class="sign-up">平乐古镇</a>
                        </li>
                        <li>
                            <p>天台山</p>
                        </li>
                        <li>
                            <p>文君故里</p>
                        </li>
                        <li>
                            <p>南宝山</p>
                        </li>
                        <li><a href="#" class="sign-up">四川</a></li>
                    </ul>
                </div>
                <div class="col-md-3 price-grid">
                    <ul>
                        <li>
                            <h6>贵福镇</h6>
                        </li>
                        <li><span><b>达州</b><small>Da Zhou</small></span></li>
                        <li>
                            <p>八台山</p>
                        </li>
                        <li>
                            <a href="https://baike.so.com/doc/5379324-5615566.html" class="sign-up">賨人谷</a>
                        </li>
                        <li>
                            <p>巴山大峡谷</p>
                        </li>
                        <li>
                            <p>老龙洞</p>
                        </li>
                        <li><a href="#" class="sign-up">四川</a></li>
                    </ul>
                </div>
                <div class="clearfix"> </div>
            </div>
        </div>
    </div>
    <div class="contact" id="contact">
        <div class="map">
            <iframe src="https://www.meishichina.com/  "></iframe>
            <span> </span>
        </div>
        <div class="contact-form">
            <h4>CONTACT US</h4>
            <form>

                <input type="text" value=" Name..." onfocus="this.value='';" onblur="if (this.value == '') {this.value ='';}">

                <input type="text" value="Email..." onfocus="this.value='';" onblur="if (this.value == '') {this.value ='';}">

                <input type="text" value="Subject..." onfocus="this.value='';" onblur="if (this.value == '') {this.value ='';}">

                <textarea cols="77" rows="6" value="" onfocus="this.value='';" onblur="if (this.value == '') {this.value = '';}">Message...</textarea>
                <div class="send-in">
                    <input type="submit" value="SUBMIT">
                </div>
            </form>
        </div>
    </div>
    </div>
    <div class="footer">
        <p class="footer-grid">霸王花 &copy; 2020 12 21由霸王花Design</p>
        <script type="text/javascript">
            $(document).ready(function() {
                /*
							var defaults = {
					  			containerID: 'toTop', // fading element id
								containerHoverID: 'toTopHover', // fading element hover id
								scrollSpeed: 1200,
								easingType: 'linear' 
					 		};
							*/

                $().UItoTop({
                    easingType: 'easeOutQuart'
                });

            });
        </script>
        <a href="#" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>

    </div>
    <div style="display:none">

    </div>
    <audio src="MayPiano - Summer (钢琴版).mp3" autoplay="autoplay"></audio>

</body>

</html>